<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 80%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=N0n1jkviyzmZqpEMreK8KeMCo4uXhCLy"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
    
</head>
<body>
    <div id="allmap"></div>
    <div id="r_result">
        <input type="button" value="添加" onclick="add_control()">
        <input type="button" value="删除" onclick="del_control()">
    </div>
</body>
</html>
<script type="text/javascript">


    //百度地图API功能
    //创建Map实例
    var map = new BMap.Map('allmap');  
    //初始化地图，设置中心点坐标和地图级别
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point,12);  
    //添加地图类型控件
    var type = new BMap.MapTypeControl();
    map.addControl(type);
    //设置地图先显示的城市，此项是必须设置的
    map.setCurrentCity('北京');  //也可以用城市名设置中心坐标 map.centerAndZoom('上海',15);
    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
    
    //平移、缩放、拖拽功能
    //map.disableDragging(); //禁止拖拽
    // setTimeout(function(){
    //     map.panTo(new BMap.Point(121.477937,31.236305)); //设置地图平移，2秒后坐标平移到上海
    //     map.setZoom(15);    //缩放，2秒后放大到到15级
    //     map.enableDragging();     //允许拖拽，2秒后开启拖拽功能
    // },2000);

    //设置地图显示范围
    //将地图显示范围设定在指定区域，地图拖出该区域后会重新弹回。
    // var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));      //Bounds 界限
    // try{
    //     BMapLib.AreaRestriction.setBounds(map,b); //设置范围这里记得引js文件
    // }catch(e){
    //     alert(e);
    // }

    //获取地图显示范围
    //获取可视区域
    // var bs = map.getBounds();
    // //获取可视区域左下角
    // var bssw = bs.getSouthWest();
    // //获取可视区域右上角
    // var bsne = bs.getNorthEast();
    // alert('当前可视区域的范围是：'+bssw.lng+','+bssw.lat+'到'+bsne.lng+','+bsne.lat);


    //获取两点间的距离
    var pointA = new BMap.Point(116.448624,39.925622); //创建A点---朝阳区
    var pointB = new BMap.Point(116.30547,39.965892); //创建B点--海淀区 
    //获取两点间距离，保留小数点后两位小数
    alert("从朝阳区到海淀区的距离是："+(map.getDistance(pointA,pointB)).toFixed(2)+"米。");
    var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定义折线
    map.addOverlay(polyline);     //添加折线到地图上

    //关闭默认地图POI事件,在实例地图开始的时候设置关闭默认
    //var map = new BMap.Map('allmap',{enableMapClick:false}); 
    
    //添加动画标注点
    //创建标注
    var marker = new BMap.Marker(point);
    //将标注添加到地图中
    map.addOverlay(marker);
    //跳动的动画
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); 

    //添加/删除工具条、比例尺控件
    //左上角，添加比例尺
    var top_left_control = new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT});
    //左上角，添加默认缩放平移控件
    var top_left_navigation = new BMap.NavigationControl();
    //右上角，仅包含平移和缩放按钮
    var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); 


    //添加控件
    function add_control(){
        map.addControl(top_left_control);
        map.addControl(top_left_navigation);
        map.addControl(top_right_navigation);
    }
    


    //删除控件
    function del_control(){
        map.removeControl(top_left_control);
        map.removeControl(top_left_navigation);
        map.removeControl(top_right_navigation);
    }

    //单击获取点击的经纬度
    map.addEventListener('click',function(e){
        alert('当前位置是：'+e.point.lng+','+e.point.lat);
    })

    //图块加载完成事件
    map.addEventListener('tilesloaded',function(){alert('图块加载完毕');})
    
    
</script>